<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/data-tables/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>
<!-- 新客户欢迎语 -->

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div class="welcome-text-set">
        <div class="header">
            <div class="back">返回</div>
            <div class="type_select_wrapper">
                <span class="active">新客户欢迎语</span>
                <span>入群欢迎语</span>
            </div>
        </div>
        <!-- 新客户欢迎语 -->
        <div class="welcome_text_container new_cus_welcome_box">
            <div class="header_wrapper">
                <div class="title">新客户欢迎语</div>
                <div class="text">
                    <span>由管理员或者业务负责人统一配置，配置后，客户将在添加成员为联系人后收到该欢迎语</span>
                </div>
            </div>
            <div class="normal_btn config_welcome_btn">配置欢迎语</div>
            <div class="underline"></div>
            <div class="content_wrapper">
                <div class="title">配置记录</div>
                <div class="table_wrapper">
                    <table class="layui-table welcome_text_table" style="table-layout: fixed;">
                        <thead>
                            <tr>
                                <th class="welcome">欢迎语</th>
                                <th class="time">配置时间</th>
                                <th class="area">使用范围</th>
                                <th class="operation">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <!-- 如该欢迎语存在图片，则在欢迎语最后加上 [图片] 字样 -->
                                <td class="welcome" data-imgsrc="../../images/test.JPG" data-imgname="菱悦e客服.png">您好！[图片]
                                </td>
                                <td>刚刚</td>
                                <td>全体成员</td>
                                <td>
                                    <span class="edit" data-id="0">编辑</span>
                                    <span class="delete" data-id="0">删除</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 入群欢迎语 -->
        <div class="welcome_text_container new_group_welcome_box" style="display: none;">
            <div class="header_wrapper">
                <div class="title">入群欢迎语</div>
                <div class="text">
                    <span>在这里创建欢迎语素材，群主可在群聊中选择并配置，客户进入群聊后，将收到欢迎语</span>
                </div>
            </div>
            <div class="normal_btn add_group_welcome_text_btn">添加素材</div>
            <div class="underline"></div>
            <div class="content_wrapper">
                <div class="table_wrapper">
                    <table class="layui-table group_welcome_text_table" style="table-layout: fixed;">
                        <thead>
                            <tr>
                                <th>入群欢迎语</th>
                                <th style="width: 150px;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <!-- 如该欢迎语存在图片，则在欢迎语最后加上 [图片] 字样 -->
                                <td class="welcome" data-imgsrc="../../images/test.JPG" data-imgname="菱悦e客服.png">您好！[图片]</td>
                                <td>
                                    <span class="edit" data-id="0">编辑</span>
                                    <span class="delete" data-id="0">删除</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="welcome" data-imgsrc="" data-imgname="">您好！</td>
                                <td>
                                    <span class="edit" data-id="1">编辑</span>
                                    <span class="delete" data-id="1">删除</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/data-tables/jquery.dataTables.min.js"></script>
    <script>
        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }
        let nav_index = getUrlParam('nav_index') // 拿到接收到的父级页面tab的index值
        let tab_index = getUrlParam('tab_index') // 接收的点击的tab index值
        if (!tab_index) {
            tab_index = 0
        }
        // 实例化表单
        layui.use('form', function () {
            var form = layui.form;
            layui.use('layer', function () {
                var layer = layui.layer
                // 返回
                $(".back").click(function () {
                    self.location.href = "config.html?nav_index=" + nav_index
                })
                if (tab_index == 0) {
                    $(".type_select_wrapper span").eq(0).addClass('active').siblings().removeClass('active')
                    $(".new_cus_welcome_box").show()
                    $(".new_group_welcome_box").hide()
                } else {
                    $(".type_select_wrapper span").eq(1).addClass('active').siblings().removeClass('active')
                    $(".new_cus_welcome_box").hide()
                    $(".new_group_welcome_box").show()
                }
                // 切换tab
                $(".type_select_wrapper span").click(function () {
                    $(this).addClass('active').siblings().removeClass('active')
                    if ($(this).text() == '新客户欢迎语') {
                        $(".new_cus_welcome_box").show()
                        $(".new_group_welcome_box").hide()
                    } else {
                        $(".new_cus_welcome_box").hide()
                        $(".new_group_welcome_box").show()
                    }
                })
                // 点击配置欢迎语进入跳转页面
                $(".config_welcome_btn").click(function () {
                    self.location.href = "config-welcome-word.html?nav_index=" + nav_index
                        + '&id=&content=&imgSrc=&imgName='
                })

                // 点击配置记录内的欢迎语编辑
                $(".welcome_text_table").on('click', 'tbody tr td .edit', function () {
                    let id = $(this).attr('data-id') // 当前欢迎语的id
                    let content = $(this).parent().siblings(".welcome").text() // 当前欢迎语文本
                    let imgSrc = $(this).parent().siblings(".welcome").attr('data-imgsrc') // 当前欢迎语服务器图片路径
                    let imgName = $(this).parent().siblings(".welcome").attr('data-imgname') // 当前欢迎语图片名称
                    self.location.href = "config-welcome-word.html?nav_index=" + nav_index
                        + '&id=' + id + '&content=' + encodeURI(encodeURI(content)) + '&imgSrc=' + imgSrc + '&imgName=' + encodeURI(encodeURI(imgName))
                })

                // 删除新客户欢迎语
                $(".welcome_text_table").on('click', 'tbody tr td .delete', function () {
                    let id = $(this).attr('data-id') // 当前欢迎语的id
                    console.log(id)
                    layer.confirm('是否删除当前欢迎语？', {
                        btn: ['取消', '确认'] //按钮
                    }, function (index) {
                        layer.close(index)
                    }, function () {
                        layer.msg('删除成功')
                    });
                })

                // 拿到列表长度
                let cus_welcome_length = 1;
                if (cus_welcome_length > 0) {
                    // 如果列表有一条 则配置欢迎语按钮隐藏
                    $(".config_welcome_btn").hide()
                } else {
                    // 如果没有数据 则配置欢迎语按钮显示
                    $(".config_welcome_btn").show()
                }

                // 入群欢迎语 添加素材
                $(".add_group_welcome_text_btn").click(function() {
                    self.location.href = "group-welcome-word.html?nav_index=" + nav_index
                        + '&id=&content=&imgSrc=&imgName='
                })

                // 入群欢迎语 编辑
                $(".group_welcome_text_table").on('click', 'tbody tr td .edit', function () {
                    let id = $(this).attr('data-id') // 当前欢迎语的id
                    let content = $(this).parent().siblings(".welcome").text() // 当前欢迎语文本
                    let imgSrc = $(this).parent().siblings(".welcome").attr('data-imgsrc') // 当前欢迎语服务器图片路径
                    let imgName = $(this).parent().siblings(".welcome").attr('data-imgname') // 当前欢迎语图片名称
                    self.location.href = "group-welcome-word.html?nav_index=" + nav_index
                        + '&id=' + id + '&content=' + encodeURI(encodeURI(content)) + '&imgSrc=' + imgSrc + '&imgName=' + encodeURI(encodeURI(imgName))
                })

                // 删除入群欢迎语
                $(".group_welcome_text_table").on('click', 'tbody tr td .delete', function () {
                    let id = $(this).attr('data-id') // 当前欢迎语的id
                    console.log(id)
                    layer.confirm('是否删除当前欢迎语？', {
                        btn: ['取消', '确认'] //按钮
                    }, function (index) {
                        layer.close(index)
                    }, function () {
                        layer.msg('删除成功')
                    });
                })
            })

        });

    </script>
</body>

</html>